import React from "react";
import 搜索 from "../assets/餐饮版首页切图/搜索.png";
import styles from "./styles.module.less";
import Content from './Content'

export default class Tabs extends React.Component {
    state = {
        active: 0
    };
    render() {
        const { active } = this.state;
        const content = {
            0: <Content />,
            1: <div>店铺</div>,
            2: <div>我的</div>
        };
        return (
            <div className={styles.bodyBox} >
                <div className={styles.tabs}>
                    <div
                        className={active === 0 ? styles.active : null}
                        onClick={() => this.setState({ active: 0 })}
                    >
                        商品
                        {active === 0 && <div />}
                    </div>
                    <div
                        className={active === 1 ? styles.active : null}
                        onClick={() => this.setState({ active: 1 })}
                    >
                        店铺
                        {active === 1 && <div />}
                    </div>
                    <div
                        className={active === 2 ? styles.active : null}
                        onClick={() => this.setState({ active: 2 })}
                    >
                        我的
                        {active === 2 && <div />}
                    </div>
                    <div className={styles.search}>
                        <img src={搜索} alt='' />
                        搜索
                    </div>
                </div>
                <div>{content[active]}</div>
            </div>
        );
    }
}
